<template>
  <div class="login-container">
    <div class="main-title">雷泽矩阵 | 虚拟电厂平台</div>
    <div class="bigLogo"></div>
    <div class="login-content">
      <div class="login-box">
        <div class="login-version">欢迎登录</div>
        <a-form
          :model="loginForm"
          :rules="rules"
          ref="loginFormRef"
          class="login-form"
        >
          <a-form-item name="username" :rules="rules.username">
            <a-input
              v-model:value="loginForm.username"
              placeholder="请输入用户名称"
            >
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item name="password" :rules="rules.password">
            <a-input-password
              v-model:value="loginForm.password"
              placeholder="请输入登录密码"
              @keyup.enter="getToken"
            >
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input-password>
          </a-form-item>
          <div class="remember-password">
            <a-checkbox v-model:checked="loginForm.remember"
              >记住密码</a-checkbox
            >
          </div>
          <a-button
            type="primary"
            class="login-button"
            @click="getToken"
            :loading="loading"
            >登录</a-button
          >
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useLoginStore } from "@/stores/loginConfig"
import secret from "@/utils/secret"

const $api = inject("$api")
const { changeLoginData } = useLoginStore()
const router = useRouter()
const loginForm = ref({
  username: "",
  password: "",
  remember: false,
})

const loginFormRef = ref()
const rules = {
  username: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
  password: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
}

// 保存登录信息到本地存储
const saveLoginInfo = () => {
  if (loginForm.value.remember) {
    localStorage.setItem(
      "loginInfo",
      JSON.stringify({
        username: loginForm.value.username,
        password: loginForm.value.password,
      })
    )
  } else {
    localStorage.removeItem("loginInfo")
  }
}

// 从本地存储加载登录信息
const loadLoginInfo = () => {
  const savedInfo = localStorage.getItem("loginInfo")
  if (savedInfo) {
    const { username, password } = JSON.parse(savedInfo)
    loginForm.value.username = username
    loginForm.value.password = password
    loginForm.value.remember = true
  }
}

const loading = ref(false)

const getToken = async () => {
  try {
    loading.value = true
    await loginFormRef.value.validate()
    const res = await $api.getToken({
      username: loginForm.value.username,
      password: secret.encrypt(loginForm.value.password),
      grant_type: "password",
    })
    if (res && res.code === 0) {
      changeLoginData(res)
      saveLoginInfo()

      if (res?.user_info?.userType === "1") {
        router.push("/FrontPage/StationOverview")
      } else {
        router.push("/MonitoringCenter/MonitorStaion")
      }
    }
  } catch (error) {
    console.error("表单验证失败:", error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadLoginInfo()
})
</script>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0d1117;
  background: url(@/assets/login/logoBg.jpg) no-repeat center / 100% 100%;
  position: relative;
}

.main-title {
  color: #fff;
  font-size: 26px;
  text-align: center;
  margin-bottom: 60px;
  position: absolute;
  top: 20px;
  left: 20px;
  padding-left: 30px;
  &::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    background: url("@/assets/login/logo.png") no-repeat center / 100% 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -13px;
  }
}
.login-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.bigLogo {
  position: absolute;
  top: 18vh;
  left: 19vw;
  background: url("@/assets/login/bigLogo.png") no-repeat center / contain;
  width: 25vw;
  height: 35vh;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.login-box {
  width: 400px;
  padding: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  position: relative;
  margin-right: 10%;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 20px;
    background: url("@/assets/login/bg1.png") no-repeat center / 100% 100%;
    position: absolute;
    top: -10px;
    left: 0;
  }
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 20px;
    background: url("@/assets/login/bg2.png") no-repeat center / 100% 100%;
    position: absolute;
    bottom: -10px;
    left: 0;
  }
  .login-version {
    color: #00b7f6;
    margin-bottom: 40px;
    border-left: 5px solid #00b7f6;
    padding-left: 10px;
    font-size: 20px;
  }
}

.login-form :deep(.ant-input) {
  background-color: transparent;
  color: #ffffff;
  height: 38px;
}
.login-form :deep(.ant-input-affix-wrapper) {
  background-color: transparent;
}
.login-form :deep(.ant-checkbox-inner) {
  background-color: transparent;
}

.login-form :deep(.ant-input:focus),
.login-form :deep(.ant-input-focused) {
  border-color: #00b7f6;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.login-form :deep(.ant-input-prefix) {
  color: #8b949e;
}

.remember-password {
  margin-bottom: 20px;
}

.remember-password :deep(.ant-checkbox-wrapper) {
  color: #8b949e;
}

.login-button {
  width: 100%;
  height: 40px;
  background-color: #00b7f6;
  border: none;
}

.login-button:hover {
  background-color: #00b7f6;
}
</style>
